<template>
  <div>
    <!-- 
      通过变量的boolean值隐式转化，来判断是true或者是false，为true时显示，为false时隐藏
      => 
      1. 变量是否必须是布尔值？ => 不必须是布尔值，只需要查看它的隐式转化结果
                                 隐式转化为false的情况: 0 / '' / null / undefined / NaN 

      v-show="变量"
      原理: 给当前标签设置一个display: none; 来进行隐藏操作，原来的这个标签元素还存在于dom数中

      v-if="变量"
      原理: 直接将需要隐藏的元素从dom树中删除

      还可以和 v-else-if 和 v-else进行连用，它的判断逻辑与 js中 if else 完全相同
      当使用v-if/v-else-if/v-else 时，他们之间必须是连续的兄弟标签

      *** 选择v-show和v-if的直接条件: 如果当前元素及内部子元素全是静态数据，那么使用v-show，除此以外全用v-if
    -->
    <div v-show="flag1">v-show</div>

    <div v-if="flag1">{{ msg }}</div>

    <div v-if="flag2 === 0">显示为0</div>
    <div v-else-if="flag2 === 1">显示为1</div>
    <div v-else>显示为其他</div>
  </div>
</template>

<script>
/* 
  if () {}
  else if () {}
  else {}
*/
export default {
  name: 'DemoIndex08',
  data () {
    return {
      flag1: true,
      msg: '动态',
      flag2: 0
    }
  }
}
</script>

<style>

</style>